寫在前面

17日的 Helloworld Express 小節裡有出現過這篇的連結欸！ 它這樣設計不好吧

出處 ， 有簡體版 ， 進入後自行點選

本文目的就是要把 Express 裝到你電腦裡！ 全文應該不會超過兩天
這篇我也要任性的寫， 因為昨天補班日、 今天星期日。

Express development environment overview

為了趕快開始開發 app， Node & Express 的安裝非常簡單～ 這段落講一些需要用到的工具、 解釋簡單的安裝方式。
( 官網有針對各系統平台 ( ubuntu, macOS, Windows )， 這裡會先講 macOS， 視情況決定 ubuntu/Windows )


Express 開發環境是啥？

它包括 Nodejs 安裝、 NPM 套件管理器、 還有 ( 非必須的 ) Express App Generator， 以上都在你的電腦裡。

Node & NPM 天生綁再一起， 安裝也再一起， 永不分離。 用 NPM 安裝 Express， Express 在 web app 中是 dependency ( 有關 dependency & devDependency， 後續可能會講到這裡先跳過 ) 。

NPM 可以 ( 全域 ) 安裝 Express App Generator ， 一個依循 MVC 架構的生產器， 但它不是非裝不可， 沒有它也可以生出 Express app， 不過這邊還是會安裝， 因為它很方便～

Note: 跟其他框架不一樣， 這個環境沒有包含一個分離的 server。 在 Node/Express 中， 它都自己來！

有很多其他工具也是開發環境的一部份： 像編輯器、 版本控制工具( 如： Git ， 參考文章： 用樂高玩轉 GIT 版本控制)。 我們假設都已經準備好了

OS 支援

支援 Node 就可以跑 Express， 而哪些 OS 有支援 Node ? 上述提到的之外其他自己看

要用 Node/Express 哪個版本啊？

新的就會有更多 bug 已經被修好， 支援更新的 ECMAScript ( JS )， 還有 Node APIs 的改善。
先講 Node: 用最新的 LTS ， 如果你要 LTS 還沒有的功能就用 Current release 。

Express: 用最新的。

那 db 跟其他 dependencies 呢？

像 db drivers, template engins, authentication (認證) engins ... ， 都用 NPM 裝， 其他後面說

安裝 Node

可以直接先看 17日最下方的懶人包， 再回來跳到測試安裝有沒有成功--比較讓人感到興奮的測試方式
如果要用別的方式安裝，點這篇官網 (https://nodejs.org/en/download/package-manager/)，其中我主觀推薦的是 nvm 跟 macOS Homebrew 。 這裡要用最簡單的方式

Windows and macOS

想不到它們被放在一起。 在這兩個系統上安裝很直觀：

1. 去下載
   1. (https://nodejs.org/en/ )
   2. 按 LTS
2. 去裝
   1. 點兩下

( 記得我一開始好像是用 Homebrew 安裝 )

Ubuntu 18.04

點上面用別的方式安裝， 但這邊有個警告！我想來翻一下
! Warning : 不要在遠端 Ubuntu 直接安裝， 因為它們有很老的版本

測試安裝有沒有成功

最簡單的方式： 在 terminal 查詢版號， 看有沒有回傳

$ node -v
v10.16.0
$ npm -v
6.9.0

比較讓人感到興奮的測試方式 ( MDN 說的， 不過我認為能看到 code 有在聽話執行確實比單純查版號來得振奮 )

我們要新增一個很基本的 純node server， 在瀏覽器輸入指定 URL 後印出 Hello World

1. ( 這和第 16日的範例非常相似， 註解就不翻了 ) 複製下面的 code 到自己新增的 hellonode.js， 這段 code 沒用到 Express， 不過用了一些 ES6 語法

//Load HTTP module
const http = require("http");
const hostname = '127.0.0.1';
const port = 3000;
//Create HTTP server and listen on port 3000 for requests
const server = http.createServer((req, res) => {
  //Set the response HTTP header with HTTP status and Content type
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});
//listen for request on port 3000, and as a callback function have the port listened on logged
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

重點在於 import http module 來建立偵聽 req 再 port 3000 的 server (createServer())， createServer() function 帶著一個 callback function 當作參數 ， 那個 callback 會在接到 req 時觸發 -- 回傳狀態碼 ( 200 ) 跟文字 ( "Hello World" )

Note: 現在看不懂上面的 code 沒關係， 我們開始用 Express 之後會有更詳細的解說

2. 在這支檔案目錄下輸入指令來啟用 server

$ node hellonode.js
Server running at http://127.0.0.1:3000/

3. 點右邊(http://127.0.0.1:3000/ )

寫在後面

一篇篇幅會盡量控制在 50-120 行結束， 所在此先打斷， 明天會探討 NPM 使用、 安裝 generator 就會做總結了。
如果篇幅許可， 會再繼續下個頁面， 也是重頭戲： Express tutorial: The Local Library website